<template>

  <div>

    <el-row>
      <el-col :span="6">
        <div class="birthdayHum">
          <span >月度收入</span>
        </div>
        <div class="birthdayNum">
          <!--<span style="color:#F76707">{{income}}</span><span class="birthdayNumHum"> 元</span>-->
          <span style="color:#67D5B5">{{income}}</span><span class="birthdayNumHum"> 元</span>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="birthdayHum">
          <span >月度支出</span>
        </div>
        <div class="birthdayNum">
          <!--<span style="color:#36B64B">{{expenditure}}</span><span class="birthdayNumHum"> 元</span>-->
          <span style="color:#EE7785">{{expenditure}}</span><span class="birthdayNumHum"> 元</span>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="birthdayHum">
          <span >收入的笔数</span>
        </div>
        <div class="birthdayNum">
          <!--<span style="color:#F76707">{{incomeNum}}</span><span class="birthdayNumHum"> 元</span>-->
          <span style="color:#C89EC4">{{incomeNum}}</span><span class="birthdayNumHum"> 笔</span>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="birthdayHum">
          <span >支出的笔数</span>
        </div>
        <div class="birthdayNum">
          <!--<span style="color:#36B64B">{{expenditureNum}}</span><span class="birthdayNumHum"> 元</span>-->
          <span style="color:#84B1ED">{{expenditureNum}}</span><span class="birthdayNumHum"> 笔</span>
        </div>
      </el-col>

    </el-row>

  </div>

</template>

<script>

  import http from '@/utils/http'

  export default {
    // 总账单
    name: "GeneralLedger",
    data(){
      return {
        // 收入
        income: 0,
        // 支出
        expenditure: 0,
        // 支出的笔数
        expenditureNum: 0,
        // 收入的笔数
        incomeNum: 0,
      }
    },
    methods: {
      /**
       * 获取月度支出、收入以及笔数
       */
      getTotalExpenditure(){
        http.get("/bill/getMonthlyExpenditure", {
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          if (res.data){
            this.income = res.data.income
            this.expenditure = res.data.expenditure
            this.expenditureNum = res.data.expenditureNum
            this.incomeNum = res.data.incomeNum
          }

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.getTotalExpenditure()
    },
  }
</script>

<style scoped>

  .birthdayHum {
    margin: 5px;
    font-weight: 400;
    font-size: 14px;
    color: #909399;
    text-align: center
  }

  .birthdayNum {
    /*margin: 5px;*/
    font-weight: 700;
    font-size: 23px;
    /*color: #909399;*/
    text-align: center
  }

  .birthdayNumHum {
    /*margin: 5px;*/
    /*font-weight: 700;*/
    font-size: 14px;
    /*color: #909399;*/
    /*text-align: center*/
  }


</style>
